<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="./css/myGift.css">
    <title>2021少数民族传统体育竞技</title>
</head>
<body>
    <div id="app">
        <div class="layout">
            <img src="http://qrwbtqqjh.hn-bkt.clouddn.com/game1_12.png" alt="" class="bg-img">
            <div class="list-box">
                <img src="./images/title_index6.png" alt="" class="title-img">
                <div class="package-list">
                    <div class="prize-list-box" @scroll="moreItem">
                        <div class="package-item" v-for="item in list" :key="item.prize_id">
                            <span>{{item.prize_title}}</span>
                            <span>{{item.prize_amount}}</span>
                        </div>
                    </div>
                </div>
                <img src="./images/btn_index19.png" alt="" class="back-btn">
            </div>
        </div>
    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/vue.js"></script>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        request('get_share_sign/', {
            zm_token: localStorage.user_token,
            _zm_post_type: 'ajax',
            url: location.href
        }).then(res => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.rsm.appId, // 必填，公众号的唯一标识
                timestamp: res.rsm.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.rsm.nonceStr, // 必填，生成签名的随机串
                signature: res.rsm.signature, // 必填，签名
                jsApiList: ['onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'onMenuShareTimeline',
                    'updateAppMessageShareData',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                ] // 必填，需要使用的JS接口列表
            });
            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                wx.hideAllNonBaseMenuItem();
            });
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [],
                    page: 1,
                    noData: true
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                getData() {
                    request('user_prize/', {
                        zm_token: localStorage.user_token,
                        _zm_post_type: 'ajax',
                        page: this.page
                    }).then(res => {
                        console.log(res.rsm);
                        if (res.rsm.prize_list.length > 0) {
                            this.list = this.list.concat(res.rsm.prize_list)
                            this.noData = true
                        } else {
                            this.noData = false
                        }
                    })
                },
                moreItem() {
                    if (this.noData) {
                        let itemBox = document.querySelector('.prize-list-box')
                        let item = document.getElementsByClassName('package-item')[0]
                        let itemHeight = (item.clientHeight + 7) * this.list.length
                        // console.log(itemBox.scrollTop + itemBox.clientHeight);
                        // console.log(itemHeight);
                        if (itemBox.scrollTop + itemBox.clientHeight >= itemHeight) {
                            this.page++
                            this.getData()
                        }
                    } else {
                        return
                    }
                },
            }
        })
        $('.back-btn').on('click', function() {
            location.href = 'http://youxi.haiqikj.com/index.html'
        })
    </script>
</body>
</html>